<template>
  <div id="index">
    <div class="max-width container">
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <!-- 语言选择 -->
          <el-select @change="onLangChange" v-model="lang">
            <el-option
              v-for="(v, i) in langs"
              :key="i"
              :label="v.label"
              :value="v.value"
            >
            </el-option>
          </el-select>

          <h1 class="mb-15 mt-15">{{ $t(`index.标题`) }}</h1>
          <div class="fz-14 cl-basic">
            <div class="mb-15">{{ $t(`index.介绍1`) }}</div>
            <div class="mb-15">{{ $t(`index.介绍2`) }}</div>
          </div>

          <!-- 功能按钮 -->
          <div class="mb-15">
            <el-button type="primary" plain @click="toBlock('join')">
              {{
                $store.state.isRegister
                  ? $t(`intro.function.join.复制推广链接`)
                  : $t(`common.空投`)
              }}
            </el-button>
            <!-- <el-button type="primary" @click="toBlock('sell')">
              {{ $t(`common.预售`) }}
            </el-button> -->
          </div>
        </el-col>

        <el-col :sm="12" :xs="24">
          <img src="@/assets/img/index.gif" style="width: 100%" />
        </el-col>
      </el-row>

      <h1 class="title">{{ $t(`index.intro.标题`) }}</h1>

      <el-row :gutter="24" v-for="(v, i) in intros" :key="i">
        <el-col :sm="12" :xs="24" v-for="(c, i) in v" :key="i">
          <div class="mt-30">
            <div class="ta-center">
              <img
                class="inline"
                style="width: 50px; height: 50px"
                :src="c.icon"
              />
            </div>
            <div class="fz-16 fw-bold ta-center mt-10 mb-10">
              {{ $t(`index.intro.标题${c.index}`) }}
            </div>
            <div class="fz-14 cl-basic">
              {{ $t(`index.intro.介绍${c.index}`) }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      langs: [
        {
          label: '简体中文',
          value: 'zh_cn',
        },
        {
          label: 'English',
          value: 'en_us',
        },
      ],
      lang: localStorage.getItem('lang') || 'en_us',

      intros: [
        [
          {
            icon: require('@/assets/img/1.svg'),
            index: 1,
          },
          {
            icon: require('@/assets/img/2.png'),
            index: 2,
          },
        ],
        [
          {
            icon: require('@/assets/img/3.svg'),
            index: 3,
          },
          {
            icon: require('@/assets/img/4.png'),
            index: 4,
          },
        ],
      ],
    }
  },

  methods: {
    toBlock(id = '') {
      const a = document.createElement('a')
      a.href = `#${id}`
      a.click()
      a.remove()
    },

    onLangChange() {
      this.$i18n.locale = this.lang
      localStorage.setItem('lang', this.lang)
    },
  },
}
</script>

<style lang="scss" scoped>
#index {
}
</style>
